<template>
  <el-header style="    padding: 0 24px; height: 48px;font-size: 14px;    border-radius: 4px; border: 1px solid #EBEEF5;background-color: #FFF;overflow: hidden; color: #303133;">
    <el-row type="flex" align="center" style="height: 45px">
      <el-col span="7">
        <div style="display: flex;align-items: center; height:100%;color: #E6A23C;font-size: 20px"> <router-link class="article-link" :to="{path:'/myhome'}"><h3 style="color: #E6A23C;">🧀&nbsp芝士校园</h3></router-link></div>
      </el-col>
      <el-col span="8">
        <div style="display: flex;align-items: center;height: 100%;">
          <el-input placeholder="请输入搜索内容"></el-input>
          <el-button icon="el-icon-search" style="height: 40px;width: 70px">搜索</el-button>
        </div>
      </el-col>
      <el-col span="4">
        <div style="height: 100%;"></div>
      </el-col>
<!--    2.22  -->
      <el-col span="1" >
        <i class="el-icon-time" @click="drawer = true" type="primary" style="margin-left: 16px;margin-top: 15px">
        </i>
      </el-col>
      <el-drawer
        title="我是标题"
        :visible.sync="drawer"
        :with-header="false">
        <span>我来啦!</span>
      </el-drawer>
<!-- 2.22/     -->
      <el-col span="2">
        <div style="display: flex;align-items:center;height: 100%;">
          <el-link :underline="false" href="http://127.0.0.1:8088/#/UserCenter"><p>个人中心</p></el-link>
        </div>
      </el-col>

      <el-col span="1">
        <div style="display:flex;align-items:center;height: 100%;width: 45px">
          <el-avatar :size="small" :src="users.avatar"></el-avatar>
        </div>
      </el-col>
      <el-col span="1">
        <div style="display: flex;height: 100%;align-items: center">
          <!--            {{username}}-->
          {{ users.username }}
        </div>
      </el-col>
      <el-col span="1">
        <el-dropdown style="display: flex;height: 100%;align-items: center"  @command="handleCommand">
          <i class="el-icon-setting" style="margin-right: 15px"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="logout" @click="localStorage.removeItem('user')"><a @click="gologin()">退出登录</a></el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
    </el-row>
  </el-header>
</template>

<script>
import axios from "axios";

export default {
  name: "HomeHeader",
  data(){
    return{
      drawer: false,
      users:{},
    }
  },
  methods:{
    getuser(){
      this.users = JSON.parse(localStorage.getItem('users'))
    },
    gologin(){
      localStorage.removeItem('users');
      this.$router.push('/Login');
    },
    getHistory(){
      axios.post('http://localhost:8888//PostDetail/GetHistory',{
        id:this.post_id
      })
    },
  /*  handleCommand (command) {
      if (command === 'logout') {
        localStorage.removeItem('users')
        this.$router.push('/login')
      }
    }*/
  },
  created() {
    this.getuser()
    this.getHistory()
  }
}
</script>

<style scoped>
*{
  margin: 0;
  padding: 0;
}
.item{
  background-color: #eeeeee;
  width: 100%;
  height: 120px;
  border: 1px solid #ffebda;
}
</style>
